<template>
  <div class="loading-modal" v-show="loadStatus">
    <div class="loading-anim">
      <div class="loading-item">
        <div class="loading-border loading-out loading-item"></div>
      </div>
    </div>
    <!-- <div class="loading-anim">
      <div class="loading-item">
        <div
          class="loading-border loading-out loading-item"
          :style="[
            `border-color: ${diyTheme?.host_bg ? diyTheme?.host_bg : ''}`,
          ]"
        ></div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
export default {
  name: "init-load",
};
</script>
<script lang="ts" setup>
import { ref, nextTick, getCurrentInstance, onMounted } from "vue";
import { useConfig } from "@/store";
import { diyThemeDataType } from "@/types";
const configStore = useConfig();
const props = withDefaults(
  defineProps<{
    isShow: boolean;
  }>(),
  {
    isShow: true,
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const loadStatus = ref<boolean>(props.isShow);

const diyTheme = ref<diyThemeDataType>();

const open = () => {
  nextTick(() => {
    // diyTheme.value = configStore.getDiyTheme;
  });
  loadStatus.value = true;
};
const close = () => {
  loadStatus.value = false;
};

onMounted(() => {
  nextTick(() => {
    diyTheme.value = configStore.getDiyTheme;
  });
});

defineExpose({ open, close });
</script>

<style scoped>
.loading-modal {
  width: 160rpx;
  height: 160rpx;
  position: fixed;
  top: calc(40% - 80rpx);
  left: calc(50% - 80rpx);
  z-index: 9997;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--base-radius-default);
  text-align: center;
}

.loading-anim {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.loading-anim > .loading-item {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: all 1s ease-out;
}
.loading-anim .loading-border {
  position: absolute;
  border-radius: 50%;
  border: 6rpx solid;
}

.loading-anim .loading-out {
  width: 70%;
  height: 70%;
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  animation: spin 0.7s linear normal infinite;
}
</style>